<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@include file="/WEB-INF/jsp/include/front.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=css%>/front/fenye.css" />
<title>好教师联盟-优秀学员</title>
<style>
/*---start-team----*/
.team {}
.team h2{font-weight: 400;display: block;font-size: 2em;
	color: #3e454d;
	margin: 0.5em 0 0.5em 0;
	border-bottom: 1px solid #eee;
	padding-bottom:0.3em;
}
.team-member{
	width: 17.2%;
	margin-right:1%;
	float: left;
	border: 1px solid #eee;
	padding: 0.5em;
}
.team-member h3{
	color: #006D4E;
	display: block;
	line-height: 1.5em;
}
.team-member p{
	color: rgba(85, 85, 85, 0.53);
	line-height: 1.5em;
	padding: 6px 0px 5px 0px;
}

/*---light-box---*/
.flipLightBox{
	color: #22B4B8;
	display: block;
	line-height: 1.5em;
}
.last{
	margin:0;
}
.sub-about-grid-social ul li{
	display:inline-block;
}
.sub-about-grid-social {
	padding: 0.5em 0;
}
.sub-about-grid-social ul li img{
	background:#fff;
	padding:10px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	border:1px solid #EEE;
}
.sub-about-grid-social ul li img:hover{
	background:#3E454D;
}
.flipLightBox img{
	width:100%;
}
.teainfo ul li{list-style:none;font-size:14px;padding:3px 0}
.clear{clear:both;}
</style>
<script>
$(document).ready(function($) {
	$("#top_student").addClass("active");
});

function changePage(page){
	$("#o_page").val(page);
	myAjax();
}

function myAjax(){
	$("#form").submit();
}
</script>
</head>
<body>
<%@include file="/WEB-INF/jsp/front/home/top.jsp"%>

<div class="content">
	<div class="wrap">
		<div class="top-head">
			<ul>
				<li><a href="index.html">首页 / </a></li>
				<li><a href="#"><span>优秀学员</span></a></li>
			</ul>
		</div>
		<div class="clear"></div>
		<div class="container">
			<div>
				<form id="form" action="<%=pre%>/student/index<%=suf%>" method="get" >
					<input type="hidden" id="o_page" name="curtPage" value="${pager.curtPage }" />
				</form>
			</div>
		</div>
		
		<div class="team">
			<div style="margin:20px;"></div>
				<c:forEach items="${pager.pageList}" var="obj" varStatus="status"> 
					<div class="team-member" style="margin-bottom:1em;">
						<a href="<%=pre%>/student/info<%=suf%>?id=${obj.id}" target="_blank" class="flipLightBox">
							<img src="<%=upload%>/${obj.headpath}"  alt="" />
						</a>
						<h3>${obj.name }</h3>						
						<div class="teainfo">
							<ul>
								<li>学校：${obj.school}</li>
							</ul>
						</div>			
						<div class="sub-about-grid-social">
							<ul>
								<li>
									<a href="<%=pre%>/student/info<%=suf%>?id=${obj.id}" target="_blank">
										<img src="<%=images%>/front/checkinfo.png" title="查看详情">
									</a>
								</li>
							</ul>
						</div>
					</div>
				</c:forEach>
				<div class="clear"></div>
		</div>
		
		<!-- 分页 -->
			<div id="divFenye"><!-- 分页开始 -->
				<div class="manu">
					<c:if test="${pager.totalPage >0}">
						<!-- prev -->
						<c:choose>
							<c:when test="${pager.curtPage == 1 }">
								<span class="disabled">&lt;上一页</span>
							</c:when>
							<c:otherwise>
								<a href="javascript:void();" onclick="changePage('${pager.curtPage - 1}')">&lt; 上一页 </a>
							</c:otherwise>
						</c:choose>
						<c:if test="${pager.totalPage < 7 }">
							<c:forEach var = "item" begin="1" end = "${pager.totalPage }">
								<c:choose>
									<c:when test="${pager.curtPage == item }">
									  	<span class="current">${item }</span>
									</c:when>
									<c:otherwise>
										<a href="javascript:void();" onclick="changePage('${item}')" >${item }</a>
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</c:if>
						<c:if test="${pager.totalPage >= 7 }">
							<c:if test="${pager.curtPage <= 4 }">
								<c:forEach var = "item" begin="1" end = "5">
									<c:choose>
										<c:when test="${pager.curtPage == item }">
										  	<span class="current">${item }</span>
										</c:when>
										<c:otherwise>
											<a href="javascript:void();" onclick="changePage('${item}')" >${item }</a>
										</c:otherwise>
									</c:choose>
								</c:forEach>
								...
								<a href="javascript:void();" onclick="changePage('${pager.totalPage}')" >${pager.totalPage}</a>
							</c:if>
							<c:if test="${pager.curtPage > 4 }">
								<a href="javascript:void();" onclick="changePage('1')" >1</a>
								...
								<c:choose>
										<c:when test="${pager.curtPage < pager.totalPage - 3 }">
											<c:forEach var = "item" begin="${pager.curtPage - 2 }" end = "${pager.curtPage + 2 }">
												<c:choose>
													<c:when test="${pager.curtPage == item }">
													  	<span class="current">${item }</span>
													</c:when>
													<c:otherwise>
														<a href="javascript:void();" onclick="changePage('${item}')" >${item }</a>
													</c:otherwise>
												</c:choose>
											</c:forEach>
											...
											<a href="javascript:void();" onclick="changePage('${pager.totalPage}')" >${pager.totalPage}</a>
										</c:when>
										<c:otherwise>
											<c:forEach var = "item" begin="${pager.totalPage - 4 }" end = "${pager.totalPage }">
												<c:choose>
													<c:when test="${pager.curtPage == item }">
													  	<span class="current">${item }</span>
													</c:when>
													<c:otherwise>
														<a href="javascript:void();" onclick="changePage('${item}')" >${item }</a>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</c:otherwise>
									</c:choose>
							</c:if>
						</c:if>
						<!--next-->
						<c:choose>
							<c:when test="${pager.curtPage == pager.totalPage }">
								<span class="disabled">下一页 &gt;</span>
							</c:when>
							<c:otherwise>
								<a href="javascript:void();" onclick="changePage('${pager.curtPage + 1}')" >下一页  &gt; </a>
							</c:otherwise>
						</c:choose>	
					</c:if>
				</div>
			</div><!--分页结束-->
	</div>
</div>

<%@include file="/WEB-INF/jsp/front/home/footer.jsp"%>
</body>
</html>